<template>
  <div>
    <el-row style="width: 92%;margin: 20px auto">
      <el-button @click="showAddbox = true" plain>新增箱子</el-button>
    </el-row>
    <el-table :data="boxList" style="width: 92%;margin: 10px auto">
      <el-table-column prop="hash.boxnumber" label="箱子编号">
      </el-table-column>
      <el-table-column prop="hash.boxname" label="名称">
      </el-table-column>
      <el-table-column prop="hash.pickname" label="所属自提点">
      </el-table-column>
      <el-table-column prop="hash.statusname" label="状态">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="primary" @click="changeBox(scope.row)">修改</el-button>
          <el-button type="text" size="primary" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增箱子"
      :visible.sync="showAddbox"
      width="60%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="箱子名称">
          <el-input v-model="boxName" placeholder="请输入箱子名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="箱子编号">
          <el-input v-model="boxNumber" placeholder="请输入箱子编号"></el-input>
        </el-form-item> -->
        <el-form-item label="所属自提点">
          <el-select v-model="boxPoint" placeholder="请选择箱子所属自提点" style="width:100%">
            <el-option
              v-for="item in pointList"
              :key="item.hash.pickid"
              :label="item.hash.pickname"
              :value="item.hash.pickid"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddbox = false">取 消</el-button>
        <el-button type="primary" @click="newBox">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改箱子"
      :visible.sync="reviseBox"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="箱子编号">
          {{boxData.boxnumber}}
        </el-form-item>
        <el-form-item label="箱子名称">
          <el-input v-model="boxData.boxname"></el-input>
        </el-form-item>
        <el-form-item label="箱子状态">
          <el-radio v-model="boxData.status" label="1">未出库</el-radio>
          <el-radio v-model="boxData.status" label="2">已出库</el-radio>
        </el-form-item>
        <el-form-item label="所属自提点">
          <el-select v-model="boxData.pickid" placeholder="请选择箱子所属自提点" style="width:100%">
            <el-option
              v-for="item in pointList"
              :key="item.hash.pickid"
              :label="item.hash.pickname"
              :value="item.hash.pickid"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviseBox = false">取 消</el-button>
        <el-button type="primary" @click="saveChangebox">修 改 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxList: [],
      pointList: [],
      boxData: {},
      boxPoint: '',
      boxName: '',
      boxNumber: '',
      showAddbox: false,
      reviseBox: false,
      ts: this.newStore(),
    };
  },
  created() {
    this.getboxList();
    this.getPointList();
  },
  methods: {
    saveChangebox() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142883D0F8D3FCA25AD7E89F05129B11D8A',
        boxid: this.boxData.boxid,
        boxname: this.boxData.boxname,
        pickid: this.boxData.pickid,
        boxnumber: this.boxData.boxnumber,
        status: this.boxData.status,
      };
      this.spost(this.ts, '/mainservlet', req).then(() => {
        this.$message({
          message: '修改成功！',
          type: 'success',
        });
        this.getboxList();
        this.reviseBox = false;
      });
    },
    changeBox(item) {
      this.reviseBox = true;
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142C2E4380F763630A47E89F05129B11D8A',
        boxid: item.hash.boxid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.boxData = ts.d.data.operation1[0].hash;
      });
    },
    newBox() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E901424E95A8D2219E38CB097ED6FFA46F33FC',
        boxname: this.boxName,
        pickid: this.boxPoint,
        // boxnumber: this.boxNumber,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.showAddbox = false;
        this.$message({
          message: '添加成功！',
          type: 'success',
        });
        this.getboxList();
      });
    },
    getPointList() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2DE4A15B9858851EA9',
        schoolid: '',
        pickname: '',
        status: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.pointList = ts.d.data.operation1;
        for (let i = 0; i < this.pointList.length; i += 1) {
          if (this.pointList[i].hash.status == 1) {
            this.pointList[i].hash.status = '启用';
          } else {
            this.pointList[i].hash.status = '禁用';
          }
        }
        console.log(this.pointList);
      });
    },
    getboxList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D15FBA0CA225A3CA18',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.boxList = ts.d.data.operation1;
        for (let i = 0; i < this.boxList.length; i += 1) {
          if (this.boxList[i].hash.status == 1) {
            this.boxList[i].hash.statusname = '未出库';
          } else {
            this.boxList[i].hash.statusname = '已出库';
          }
        }
      });
    },
    beforeNew() {
      this.foodType = '';
      this.foodName = '';
      this.foodPrice = '';
      this.foodDes = '';
      this.foodSize = '';
      this.checkedTaste = [];
      this.checkedFix = [];
      this.tasteDes = '';
    },
    deleteItem(item) {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142F568A6CE28C87E07FB2202E31BB688DD',
        boxid: item.hash.boxid,
      };
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getFoodList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
      this.getboxList();
    },
  },
};
</script>

<style lang="stylus" scoped>
.num
  display flex
  justify-content space-around
  span
    font-size 24px
.el-col
  padding: 20px 10px;
.c_top
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
        padding-left 25px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
</style>
